<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>生活管理系统</title>
    <style type="text/css">
        /* 基础样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        :root {
            --primary-color: #3b82f6; /* 主色调-蓝色 */
            --secondary-color: #10b981; /* 辅助色-绿色 */
            --warning-color: #f59e0b; /* 警告色-黄色 */
            --danger-color: #ef4444; /* 危险色-红色 */
            --gray-light: #f3f4f6;
            --gray-medium: #e5e7eb;
            --gray-dark: #4b5563;
            --shadow-sm: 0 2px 4px rgba(0,0,0,0.05);
            --shadow-md: 0 4px 6px rgba(0,0,0,0.05);
            --radius: 0.625rem;
            --transition: all 0.3s ease;
        }
        #navbar{
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            background:white;
            border-bottom:1px solid var(--gray-medium) ;
            height: 64px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            box-shadow:var(--shadow-sm);
            padding: 0 2em;
            z-index: 100;
        }
        .n1 span{
            font-size: 20px;
            font-weight: 600;
            color: var(--primary-color);
        }
        .nav-menu{
            margin: 0 2em;
        }
        .nav-menu ul{
            display: flex;
            list-style: none;
            gap: 28px;
        }
        .nav-menu a{
            text-decoration: none;
            color: var(--gray-dark);
            font-size: 16px;
            padding: 8px 0;
            position: relative;
            transition:var(--transition);
        }
        .nav-menu a:hover{
            color: var(--primary-color);
        }
        .nav-menu a::after{
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: 0;
            left: 0;
            background-color: var(--primary-color);
            transition: var(--transition);
        }
        .nav-menu a:hover::after{
            width: 100%;
        }
        .nav-menu a.active{
            color: var(--primary-color);
        }
        .nav-menu a.active::after{
            width: 100%;
        }
        .n1{
            display: flex;
            gap: 10px;
            align-items: center;
        }
        
        .right-actions{
            display: flex;
            align-items: center;
            gap: 24px;
        }
        .notification-btn{
            position: relative;
            background: none;
            border: none;
            font-size: 20px;
            color: var(--gray-dark);
            cursor: pointer;
            transition: var(--transition);
            width: 36px;
            height: 36px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .notification-btn:hover{
            color: var(--danger-color);
            background-color: var(--gray-light);
        }
        .notification-badge{
            position: absolute;
            top: 2px;
            right: 2px;
            background-color: var(--danger-color);
            color: white;
            font-size: 10px;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .user-info{
            display: flex;
            align-items: center;
            gap: 10px;
            cursor: pointer;
            padding: 4px 8px;
            border-radius: 20px;
            transition: var(--transition);
        }
        .user-info:hover{
            background-color: var(--gray-light);
        }
        .user-name{
            font-size: 15px;
            
        }
        .user-image{
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background-color: var(--primary-color);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
        }

        /* 主内容区样式 */
        .main{
            padding-top: 5rem;
            padding-bottom: 4rem;
            background-color: #f9fafb;
            min-height: 100vh;
        }
        .main-div{
            padding: 1rem;
            margin: 0 3.75rem;
            max-width: 1500px;
            margin-left: auto;
            margin-right: auto;
        }
        
        /* 仪表盘样式 */
        section h1{
            font-size: clamp(1.5rem,3vw,2.5rem);
            font-weight: 700;
            color: #111827;
            margin-bottom: 0.5rem;
        }
        .welcome-date-text{
            font-size: 1rem;
            color: var(--gray-dark);
            margin-bottom: 2rem;
        }
        
        .section2{
            display: flex;
            justify-content:space-between ;
            margin-bottom: 2rem;
            flex-wrap: wrap;
            gap: 1rem;
        }
        .card{
            flex: 1;
            min-width: 250px;
            height: 10rem;
            box-shadow: var(--shadow-md);
            padding: 24px;
            background-color: white;
            border-radius: var(--radius);
            transition: var(--transition);
            border-top: 4px solid transparent;
        }
        .card:hover{
            transform: translateY(-5px);
            box-shadow: 0 10px 15px rgba(0,0,0,0.07);
        }
        .card:nth-child(1){
            border-top-color: var(--primary-color);
        }
        .card:nth-child(2){
            border-top-color: var(--danger-color);
        }
        .card:nth-child(3){
            border-top-color: var(--secondary-color);
        }
        .card:nth-child(4){
            border-top-color: var(--warning-color);
        }
            
        .card-content{
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            height: 100%;
        }
        .card-icon{
            width: 48px;
            height: 48px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            color: white;
        }
        .card:nth-child(1) .card-icon{
            background-color: rgba(59, 130, 246, 0.1);
            color: var(--primary-color);
        }
        .card:nth-child(2) .card-icon{
            background-color: rgba(239, 68, 68, 0.1);
            color: var(--danger-color);
        }
        .card:nth-child(3) .card-icon{
            background-color: rgba(16, 185, 129, 0.1);
            color: var(--secondary-color);
        }
        .card:nth-child(4) .card-icon{
            background-color: rgba(245, 158, 11, 0.1);
            color: var(--warning-color);
        }
        
        .card-stats p:first-child{
            color: var(--gray-dark);
            font-size: 14px;
            margin-bottom: 0.5rem;
        }
        .card-stats h3{
            font-size: 24px;
            margin-bottom: 0.5rem;
            color: #111827;
        }
        .card-stats p:last-child{
            font-size: 14px;
            display: flex;
            align-items: center;
            gap: 4px;
        }
        .positive{
            color: var(--secondary-color);
        }
        .negative{
            color: var(--danger-color);
        }
        
        .card2{
            display: grid;
            grid-template-columns: repeat(12, 1fr);
            gap: 2rem;
            margin-bottom: 3rem;
        }
        .card-content2-left{
            grid-column: span 8;
        }
        .card-content2-right{
            grid-column: span 4;
        }
        .card-content2-left1, .card-content2-right1{
            background-color: white;
            border-radius: var(--radius);
            box-shadow: var(--shadow-md);
            padding: 1.5rem;
            margin-bottom: 2rem;
            transition: var(--transition);
        }
        .card-content2-left1:hover, .card-content2-right1:hover{
            box-shadow: 0 10px 15px rgba(0,0,0,0.07);
        }	
        .card-title{
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 1rem;
            color: #111827;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .card-title a{
            font-size: 14px;
            color: var(--primary-color);
            text-decoration: none;
        }
        
        /* 日历样式 */
        .calendar-container{
            width: 100%;
            height: calc(100%-40px);
            padding: 0.625rem;
        }
        .calendar-header{
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 0.9375rem;
            padding: 0 0.3125rem;
        }
        .calendar-nav{
            background: none;
            border: none;
            font-size: 1.125rem;
            color: var(--primary-color);
            cursor: pointer;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: var(--transition);
        }
        .calendar-nav:hover {
            background-color: var(--gray-light);
        }
        #current-month {
            font-size: 16px;
            font-weight: 600;
            color: #111827;
        }
        .calendar-weekdays {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 5px;
            margin-bottom: 10px;
        }
        .calendar-weekdays div {
            text-align: center;
            font-size: 14px;
            color: var(--gray-dark);
            padding: 8px 0;
        }
        .calendar-days {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 5px;
            height: calc(100% - 60px);
        }
        .calendar-day {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            background-color: var(--gray-light);
            border-radius: 6px;
            padding: 5px;
            min-height: 60px;
            cursor: pointer;
            transition: var(--transition);
            position: relative;
        }
        .calendar-day:hover {
            background-color: #e0e7ff;
        }
        .calendar-day.current {
            background-color: var(--primary-color);
            color: white;
        }
        .calendar-day.other-month {
            opacity: 0.4;
        }
        
        .day-number {
            font-weight: 600;
            margin-bottom: 3px;
        }
        
        /* 日程标记点 */
        .event-marker {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background-color: var(--secondary-color);
            margin-top: 2px;
        }
        
        /* 备注弹窗背景（遮罩层） */
        .note-modal {
            display: none; 
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 1000;
            align-items: center;
            justify-content: center;
        }
        
        /* 弹窗内容 */
        .modal-content {
            background-color: white;
            border-radius: var(--radius);
            width: 90%;
            max-width: 500px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }
        
        /* 弹窗头部 */
        .modal-header {
            padding: 1rem;
            border-bottom: 1px solid var(--gray-medium);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        /* 关闭按钮 */
        .close-modal {
            background: none;
            border: none;
            font-size: 1.5rem;
            cursor: pointer;
            color: var(--gray-dark);
        }
        
        .close-modal:hover {
            color: var(--danger-color);
        }
        
        /* 弹窗内容区 */
        .modal-body {
            padding: 1rem;
        }
        
        /* 弹窗标签切换 */
        .modal-tabs {
            display: flex;
            border-bottom: 1px solid var(--gray-medium);
            margin-bottom: 1rem;
        }
        .modal-tab {
            padding: 8px 16px;
            cursor: pointer;
            border-bottom: 2px solid transparent;
            transition: var(--transition);
        }
        .modal-tab.active {
            border-bottom-color: var(--primary-color);
            color: var(--primary-color);
            font-weight: 500;
        }
        .tab-pane {
            display: none;
        }
        .tab-pane.active {
            display: block;
        }
        
        /* 待办事项样式 */
        .todo-input-container {
            display: flex;
            gap: 10px;
            margin-bottom: 1.5rem;
        }
        #todo-input {
            flex: 1;
            padding: 8px 12px;
            border: 1px solid var(--gray-medium);
            border-radius: var(--radius);
            font-size: 14px;
        }
        #todo-input:focus {
            outline: none;
            border-color: var(--primary-color);
        }
        #add-todo {
            padding: 0 16px;
            background-color: var(--primary-color);
            color: white;
            border: none;
            border-radius: var(--radius);
            cursor: pointer;
        }
        #add-todo:hover {
            background-color: #2563eb;
        }
        .todo-list {
            list-style: none;
            gap: 8px;
            display: flex;
            flex-direction: column;
        }
        .todo-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 8px 12px;
            background-color: var(--gray-light);
            border-radius: 6px;
        }
        .todo-checkbox {
            width: 16px;
            height: 16px;
            cursor: pointer;
        }
        .todo-text {
            flex: 1;
            font-size: 14px;
        }
        .todo-text.completed {
            text-decoration: line-through;
            color: var(--gray-dark);
            opacity: 0.7;
        }
        .delete-todo {
            background: none;
            border: none;
            color: var(--danger-color);
            cursor: pointer;
            font-size: 16px;
            opacity: 0.7;
        }
        .delete-todo:hover {
            opacity: 1;
        }
        
        /* 备注样式 */
        #note-input {
            width: 100%;
            min-height: 120px;
            padding: 0.75rem;
            border: 1px solid var(--gray-medium);
            border-radius: var(--radius);
            resize: vertical;
            font-family: inherit;
            font-size: 14px;
            margin-bottom: 1rem;
        }
        #note-input:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
        }
        .modal-footer {
            padding: 1rem;
            border-top: 1px solid var(--gray-medium);
            display: flex;
            justify-content: flex-end;
            gap: 10px;
        }
        #save-note, #delete-note, #clear-note {
            padding: 6px 16px;
            border-radius: 4px;
            font-size: 14px;
            cursor: pointer;
            transition: var(--transition);
        }
        #save-note {
            background-color: var(--primary-color);
            color: white;
            border: none;
        }
        #save-note:hover {
            background-color: #2563eb;
        }
        #delete-note, #clear-note {
            background-color: white;
            color: var(--danger-color);
            border: 1px solid var(--danger-color);
        }
        #delete-note:hover, #clear-note:hover {
            background-color: #fef2f2;
        }
        
        /* 备注预览和待办数量 */
        .note-preview {
            font-size: 12px;
            color: var(--gray-dark);
            margin-top: 2px;
            max-width: 100%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            width: 100%;
            text-align: center;
        }
        .calendar-day.current .note-preview {
            color: rgba(255, 255, 255, 0.9);
        }
        .todo-count {
            font-size: 12px;
            background-color: var(--warning-color);
            color: white;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 2px;
        }
        .calendar-day.current .todo-count {
            background-color: white;
            color: var(--warning-color);
        }

        /* 即将到期事项样式 */
        .upcoming-section {
            margin-bottom: 1.5rem;
        }
        .upcoming-date {
            font-size: 14px;
            color: var(--gray-dark);
            margin-bottom: 0.5rem;
            padding-left: 0.5rem;
            font-weight: 500;
        }
        .upcoming-date.today {
            color: var(--primary-color);
        }
        .upcoming-list {
            margin-left: 0.5rem;
        }
        .upcoming-item {
            display: flex;
            align-items: center;
            padding: 8px 0;
            border-bottom: 1px solid var(--gray-light);
            font-size: 14px;
        }
        .upcoming-item:last-child {
            border-bottom: none;
        }
        .upcoming-checkbox {
            margin-right: 10px;
            width: 14px;
            height: 14px;
        }
        .upcoming-text {
            flex: 1;
        }
        .upcoming-text.completed {
            text-decoration: line-through;
            color: var(--gray-dark);
            opacity: 0.7;
        }
        .no-upcoming {
            color: var(--gray-dark);
            font-size: 14px;
            text-align: center;
            padding: 1rem 0;
        }
        
        /* 待办事项页面特有样式 */
        .todos-page-header {
            margin-bottom: 2rem;
        }
        .todos-page-header h1 {
            font-size: clamp(1.5rem, 3vw, 2.5rem);
            font-weight: 700;
            color: #111827;
            margin-bottom: 0.5rem;
        }
        .todos-stats {
            display: flex;
            gap: 2rem;
            margin-bottom: 1rem;
        }
        .stat-item {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .stat-number {
            font-weight: 600;
            font-size: 1.2rem;
        }
        .stat-label {
            color: var(--gray-dark);
        }
        
        /* 左右分栏容器 */
        .todos-container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 2rem;
        }
        
        /* 左侧：已完成事项 */
        .completed-todos {
            background-color: white;
            border-radius: var(--radius);
            box-shadow: var(--shadow-md);
            padding: 1.5rem;
        }
        
        /* 右侧：未完成事项 */
        .pending-todos {
            background-color: white;
            border-radius: var(--radius);
            box-shadow: var(--shadow-md);
            padding: 1.5rem;
        }
        
        /* 列表标题 */
        .list-title {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 1rem;
            color: #111827;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-bottom: 0.5rem;
            border-bottom: 1px solid var(--gray-medium);
        }
        
        /* 待办事项列表 */
        .todos-list {
            list-style: none;
            margin-top: 1rem;
        }
        .todo-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 12px 8px;
            border-bottom: 1px solid var(--gray-light);
            transition: var(--transition);
        }
        .todo-item:hover {
            background-color: var(--gray-light);
        }
        .todo-item:last-child {
            border-bottom: none;
        }
        .todo-checkbox {
            width: 18px;
            height: 18px;
            cursor: pointer;
        }
        .todo-content {
            flex: 1;
        }
        .todo-text {
            font-size: 16px;
            margin-bottom: 4px;
        }
        .todo-text.completed {
            text-decoration: line-through;
            color: var(--gray-dark);
            opacity: 0.7;
        }
        .todo-date {
            font-size: 12px;
            color: var(--gray-dark);
        }
        .delete-todo {
            background: none;
            border: none;
            color: var(--danger-color);
            cursor: pointer;
            font-size: 16px;
            opacity: 0.7;
            transition: var(--transition);
            padding: 4px;
            border-radius: 4px;
        }
        .delete-todo:hover {
            opacity: 1;
            background-color: rgba(239, 68, 68, 0.1);
        }
        
        /* 空状态 */
        .empty-state {
            color: var(--gray-dark);
            text-align: center;
            padding: 2rem 0;
            border: 1px dashed var(--gray-medium);
            border-radius: var(--radius);
            margin-top: 1rem;
        }
        
        /* 添加待办区域 */
        .add-todo-section {
            margin-top: 1.5rem;
            padding-top: 1.5rem;
            border-top: 1px solid var(--gray-medium);
        }
        .add-todo-title {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 1rem;
        }
        .todo-input-group {
            display: flex;
            gap: 10px;
            margin-bottom: 1rem;
        }
        #new-todo-text {
            flex: 1;
            padding: 10px 12px;
            border: 1px solid var(--gray-medium);
            border-radius: var(--radius);
            font-size: 15px;
        }
        #new-todo-text:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
        }
        #new-todo-date {
            padding: 10px 12px;
            border: 1px solid var(--gray-medium);
            border-radius: var(--radius);
            font-size: 15px;
            color: var(--gray-dark);
        }
        #add-new-todo {
            padding: 0 16px;
            background-color: var(--primary-color);
            color: white;
            border: none;
            border-radius: var(--radius);
            cursor: pointer;
            transition: var(--transition);
        }
        #add-new-todo:hover {
            background-color: #2563eb;
        }
        
        /* 底部样式 */
        .footer1{
            width: 100%;
            height: auto;
            border-top: 1px solid var(--gray-medium);
            background-color: white;
            padding: 2rem 0;
        }
        .footer2{
            display: flex;
            justify-content:space-between ;
            align-items: center;
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 3.75rem;
            flex-wrap: wrap;
            gap: 1rem;
        }
        .footer-left p{
            color: var(--gray-dark);
            font-size: 14px;
        }
        .footer-right{
            display: flex;
            gap: 1.5rem;
        }
        .footer-right a{
            color: var(--gray-dark);
            text-decoration: none;
            font-size: 14px;
            transition: var(--transition);
        }
        .footer-right a:hover{
            color: var(--primary-color);
        }
        
        /* 响应式调整 */
        @media (max-width: 1024px) {
            .card2{
                grid-template-columns: 1fr;
            }
            .card-content2-left, .card-content2-right{
                grid-column: span 12;
            }
            .todos-container {
                grid-template-columns: 1fr;
            }
        }
        @media (max-width: 768px) {
            .main-div, .footer2{
                margin: 0 1rem;
                padding: 0 0.5rem;
            }
            .nav-menu{
                display: none;
            }
            .section2{
                flex-direction: column;
            }
            .card{
                width: 100%;
            }
            .todo-input-group {
                flex-direction: column;
            }
            #new-todo-date, #add-new-todo {
                width: 100%;
            }
            .calendar-day {
                min-height: 40px;
                padding: 3px;
            }
            .day-number {
                font-size: 12px;
            }
        }
    </style>
</head>
<body>
    <header id="navbar">
        <div class="n1">
            <div class="n1-logo">
                <img src="边牧.png" width="40px"alt="Logo">
            </div>
            <span>生活管理系统</span>
        </div>
        <nav class="nav-menu">
            <ul>
                <li><a href="1.html" class="active">仪表盘</a></li>
                <li><a href="#">日程管理</a></li>
                <li><a href="#">财务管理</a></li>
                <li><a href="#">健康记录</a></li>
                <li><a href="todos.html">待办事项</a></li>
            </ul>
        </nav>
        
        <div class="right-actions">
            <!-- 原有通知按钮 -->
            <button class="notification-btn">
                🔔
                <span class="notification-badge">3</span>
            </button>
        
            <!-- 原有用户信息 -->
            <div class="user-info">
                <div class="user-image">U</div>
                <span class="user-name" id="current-user">用户名</span>
            </div>
        
            <!-- 新增登出按钮 -->
            <button class="notification-btn" id="logout-btn" style="font-size: 16px; padding: 0 10px;">
                登出
            </button>
        </div>
    </header>
    
    <main class="main">
        <div class="main-div">
            <!-- 仪表盘内容 -->
            <section id="dashboard-section">
                <h1>欢迎你，XXX</h1>
                <p class="welcome-date-text">今天是<span id="current-date"></span>让我们开启愉快的一天</p>
                
                <section class="section2">
                    <div class="card">
                        <div class="card-content">
                            <div class="card-stats">
                                <p >待办事项</p>
                                <h3 >8 <span>/12</span></h3>
                                <p class="positive">完成率 67%</p>
                            </div>
                            <div class="card-icon">✓</div>
                        </div>
                    </div>
                    <div class="card">
                        <div class="card-content">
                            <div class="card-stats">
                                <p >今日支出</p>
                                <h3 >￥<span>248</span></h3>
                                <p class="negative">较昨日 12%</p>
                            </div>
                            <div class="card-icon">₌</div>
                        </div>
                    </div>
                    <div class="card">
                        <div class="card-content">
                            <div class="card-stats">
                                <p >今日步数</p>
                                <h3>5632<span></span></h3>
                                <p class="positive">目标 70%</p>
                            </div>
                            <div class="card-icon">👟</div>
                        </div>
                    </div>
                    <div class="card">
                        <div class="card-content">
                            <div class="card-stats">
                                <p >今日里程</p>
                                <h3 >4 km<span></span></h3>
                                <p class="positive">下一个目标</p>
                            </div>
                            <div class="card-icon">📍</div>
                        </div>
                    </div>
                </section>
                
                <div class="card2">
                    <div class="card-content2-left">
                        <div class="card-content2-left1">
                            <div class="card-title">
                            <span>支出趋势分析</span>
                             <a href="#">查看详情</a>
                            </div>
                            <!-- 图表区域 -->
                            <div style="height: calc(100% - 40px); display: flex; align-items: center; justify-content: center; color: var(--gray-dark);">
                                图表区域
                            </div>
                        </div>
                        <div class="card-content2-left1">
                            <div class="card-title">
                                <span>近期日程安排</span>
                                <a href="#">查看全部</a>
                            </div>
                            <!-- 日历 -->
                            <div class="calendar-container">
                                <div class="calendar-header">
                                    <button class="calendar-nav" id="prev-month">←</button>
                                    <h3 id="current-month"></h3>
                                    <button class="calendar-nav" id="next-month">→</button>
                                </div>
                                <div class="calendar-weekdays">
                                    <div>日</div>
                                    <div>一</div>
                                    <div>二</div>
                                    <div>三</div>
                                    <div>四</div>
                                    <div>五</div>
                                    <div>六</div>
                                </div>
                                <div class="calendar-days" id="calendar-days">
                                    
                                </div>
                            </div>
                            
                        </div>
                    </div>
                    <div class="card-content2-right">
                        <div class="card-content2-right1">
                            <div class="card-title">
                                <span>健康数据</span>
                                <a href="#">更多</a>
                            </div>
                            <!-- 健康数据 -->
                            <div style="height: calc(100% - 40px); display: flex; align-items: center; justify-content: center; color: var(--gray-dark);">
                                健康数据
                            </div>
                        </div>
                        <div class="card-content2-right1">
                            <div class="card-title">
                                <span>即将到期事项</span>
                                <a href="todos.html">全部</a>
                            </div>
                            <!-- 即将到期事项内容区 -->
                            <div id="upcoming-todos-container" style="height: calc(100% - 40px); overflow-y: auto; padding-right: 8px;">
                                <!-- 内容将通过JS动态生成 -->
                                <div class="no-upcoming">暂无待办事项</div>
                            </div>
                        </div>
                        <div class="card-content2-right1">
                            <div class="card-title">
                                <span>本月预算使用情况</span>
                                <a href="#">详情</a>
                            </div>
                            <!-- 预算进度 -->
                            <div style="height: calc(100% - 40px); display: flex; align-items: center; justify-content: center; color: var(--gray-dark);">
                                预算进度
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            
            <!-- 待办事项页面内容 (默认隐藏) -->
            <section id="todos-section" style="display: none;">
                <div class="todos-page-header">
                    <h1>待办事项管理</h1>
                    <div class="todos-stats">
                        <div class="stat-item">
                            <span class="stat-number" id="total-todos">0</span>
                            <span class="stat-label">总事项</span>
                        </div>
                        <div class="stat-item">
                            <span class="stat-number" id="pending-todos-count">0</span>
                            <span class="stat-label">未完成</span>
                        </div>
                        <div class="stat-item">
                            <span class="stat-number" id="completed-todos-count">0</span>
                            <span class="stat-label">已完成</span>
                        </div>
                    </div>
                </div>
                
                <div class="todos-container">
                    <!-- 左侧：已完成事项 -->
                    <div class="completed-todos">
                        <div class="list-title">
                            <span>已完成事项</span>
                            <button id="clear-completed" class="delete-todo">清空全部</button>
                        </div>
                        <ul class="todos-list" id="completed-todos-list">
                            <!-- 已完成事项将在这里动态生成 -->
                            <div class="empty-state">暂无已完成事项</div>
                        </ul>
                    </div>
                    
                    <!-- 右侧：未完成事项 -->
                    <div class="pending-todos">
                        <div class="list-title">
                            <span>未完成事项</span>
                        </div>
                        <ul class="todos-list" id="pending-todos-list">
                            <!-- 未完成事项将在这里动态生成 -->
                            <div class="empty-state">暂无未完成事项</div>
                        </ul>
                        
                        <!-- 添加新待办事项 -->
                        <div class="add-todo-section">
                            <div class="add-todo-title">添加新待办事项</div>
                            <div class="todo-input-group">
                                <input type="text" id="new-todo-text" placeholder="请输入待办事项内容...">
                                <input type="date" id="new-todo-date">
                                <button id="add-new-todo">添加</button>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </main>
    
    <footer>
        <div class="footer1">
            <div class="footer2">
                <div class="footer-left">
                    <p>© 2023 生活管理系统. 保留所有权利.</p>
                </div>
                <div class="footer-right">
                    <a href="#">帮助中心</a>
                    <a href="#">隐私政策</a>
                    <a href="#">使用条款</a>
                </div>
            </div>
        </div>
    </footer>
    
    <!-- 备注弹窗 -->
    <div class="note-modal" id="note-modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3 id="modal-date-title">2023年10月25日</h3>
                <button class="close-modal" id="close-modal">×</button>
            </div>
            <div class="modal-body">
                <!-- 弹窗标签切换 -->
                <div class="modal-tabs">
                    <div class="modal-tab active" data-tab="todo">待办事项</div>
                    <div class="modal-tab" data-tab="note">备注</div>
                </div>
                
                <!-- 待办内容 -->
                <div class="tab-pane active" id="todo-tab">
                    <div class="todo-input-container">
                        <input type="text" id="todo-input" placeholder="添加待办事项...">
                        <button id="add-todo">+</button>
                    </div>
                    <ul class="todo-list" id="todo-list"></ul>
                </div>
                
                <!-- 备注内容 -->
                <div class="tab-pane" id="note-tab">
                    <textarea id="note-input" placeholder="请输入备注内容..."></textarea>
                    <div class="note-actions">
                        <button id="clear-note">清空</button>
                        <button id="save-note">保存</button>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button id="delete-note">删除全部数据</button>
            </div>
        </div>
    </div>
    
    <script>
		// 登录状态验证 - 页面加载时执行
		document.addEventListener('DOMContentLoaded', function() {
		    // 检查是否已登录，未登录则强制跳转登录页
		    const isLoggedIn = localStorage.getItem('isLoggedIn');
		    if (isLoggedIn !== 'true') {
		        window.location.href = 'login.html';
		        return;
		    }
		
		    // 显示当前登录用户的用户名
		    const currentUser = localStorage.getItem('currentUser');
		    if (currentUser) {
		        // 更新导航栏的用户名
		        document.getElementById('current-user').textContent = currentUser;
		        
		        // 更新仪表盘的欢迎语（仅1.html需要，todos.html可省略）
		        const welcomeTitle = document.querySelector('h1');
		        if (welcomeTitle && welcomeTitle.textContent.includes('欢迎你')) {
		            welcomeTitle.textContent = `欢迎你，${currentUser}`;
		        }
		    }
		
		    // 登出功能
		    document.getElementById('logout-btn').addEventListener('click', function() {
		        if (confirm('确定要退出登录吗？')) {
		            // 清除登录状态
		            localStorage.removeItem('isLoggedIn');
		            localStorage.removeItem('currentUser');
		            // 跳回登录页
		            window.location.href = 'login.html';
		        }
		    });
		
		    // 以下保留原有页面初始化逻辑（如页面切换、日历渲染等）
		    // ---------- 原有代码分割线 ----------
		    const path = window.location.pathname;
		    if (path.endsWith('todos.html')) {
		        // 原有todos页面初始化代码...
		    } else {
		        // 原有仪表盘页面初始化代码...
		    }
		});
        // 页面初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 检查当前页面并显示相应内容
            const path = window.location.pathname;
            if (path.endsWith('todos.html')) {
                document.getElementById('dashboard-section').style.display = 'none';
                document.getElementById('todos-section').style.display = 'block';
                // 设置导航栏激活状态
                document.querySelectorAll('.nav-menu a').forEach(link => {
                    link.classList.remove('active');
                    if (link.getAttribute('href') === 'todos.html') {
                        link.classList.add('active');
                    }
                });
                initTodosPage();
            } else {
                initDashboardPage();
            }
        });
        
        // 数据存储
        let todoData = JSON.parse(localStorage.getItem('calendarTodos')) || {}; // 待办数据
        let noteData = JSON.parse(localStorage.getItem('calendarNotes')) || {};   // 备注数据
        
        // 仪表盘页面初始化
        function initDashboardPage() {
            // 显示当前日期
            const dateOptions = { year: 'numeric', month: 'long', day: 'numeric', weekday: 'long' };
            const currentDate = new Date().toLocaleDateString('zh-CN', dateOptions);
            document.getElementById('current-date').textContent = currentDate;
            
            // 初始化日历
            renderCalendar();
        }
        
        // 日历渲染
        let currentDisplayDate = new Date();
        let selectedDate = null;
        
        function renderCalendar() {
            const year = currentDisplayDate.getFullYear();
            const month = currentDisplayDate.getMonth();
            const monthNames = ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"];
            document.getElementById('current-month').textContent = `${year}年 ${monthNames[month]}`;
    
            const firstDay = new Date(year, month, 1);
            const lastDay = new Date(year, month + 1, 0);
            const firstDayIndex = firstDay.getDay();
            const daysInMonth = lastDay.getDate();
    
            const daysContainer = document.getElementById('calendar-days');
            daysContainer.innerHTML = '';
    
            // 添加上月剩余天数
            const prevMonthLastDay = new Date(year, month, 0).getDate();
            for (let i = firstDayIndex; i > 0; i--) {
                const day = prevMonthLastDay - i + 1;
                const dateStr = `${year}-${month}-${day}`;
                const dayElement = createDayElement(day, true, false, dateStr);
                daysContainer.appendChild(dayElement);
            }
    
            // 添加当月天数
            const today = new Date();
            const isCurrentMonth = today.getFullYear() === year && today.getMonth() === month;
            for (let i = 1; i <= daysInMonth; i++) {
                const isToday = isCurrentMonth && today.getDate() === i;
                const dateStr = `${year}-${month}-${i}`;
                const dayElement = createDayElement(i, false, isToday, dateStr);
                
                // 显示备注预览
                if (noteData[dateStr]) {
                    const notePreview = document.createElement('div');
                    notePreview.className = 'note-preview';
                    notePreview.textContent = noteData[dateStr].length > 10 
                        ? noteData[dateStr].slice(0, 10) + '...' 
                        : noteData[dateStr];
                    dayElement.appendChild(notePreview);
                }

                // 显示待办数量（只统计未完成的）
                const incompleteTodos = todoData[dateStr]?.filter(todo => !todo.completed) || [];
                if (incompleteTodos.length > 0) {
                    const countElement = document.createElement('div');
                    countElement.className = 'todo-count';
                    countElement.textContent = incompleteTodos.length;
                    dayElement.appendChild(countElement);
                }
    
                daysContainer.appendChild(dayElement);
            }
    
            // 添加下月开始天数
            const remainingDays = 42 - (firstDayIndex + daysInMonth);
            for (let i = 1; i <= remainingDays; i++) {
                const dateStr = `${year}-${month + 1}-${i}`;
                const dayElement = createDayElement(i, true, false, dateStr);
                daysContainer.appendChild(dayElement);
            }
            
            // 渲染即将到期事项
            renderUpcomingTodos();
        }
        
        // 创建单个日期元素
        function createDayElement(dayNumber, isOtherMonth, isToday, dateStr) {
            const dayElement = document.createElement('div');
            dayElement.className = `calendar-day ${isOtherMonth ? 'other-month' : ''} ${isToday ? 'current' : ''}`;
            dayElement.dataset.date = dateStr;
    
            const numberElement = document.createElement('div');
            numberElement.className = 'day-number';
            numberElement.textContent = dayNumber;
            dayElement.appendChild(numberElement);
    
            // 点击日期打开弹窗
            dayElement.addEventListener('click', () => {
                selectedDate = dateStr;
                const [year, month, day] = dateStr.split('-').map(Number);
                document.getElementById('modal-date-title').textContent = 
                    `${year}年${month + 1}月${day}日`;
                document.getElementById('note-input').value = noteData[selectedDate] || '';
                renderTodosInModal();
                document.getElementById('note-modal').style.display = 'flex';
            });
    
            return dayElement;
        }
        
        // 渲染即将到期事项
        function renderUpcomingTodos() {
            const container = document.getElementById('upcoming-todos-container');
            container.innerHTML = '';
            
            // 获取今天的日期字符串
            const today = new Date();
            const todayStr = `${today.getFullYear()}-${today.getMonth()}-${today.getDate()}`;
            
            // 筛选出所有包含未完成待办事项的日期，今天的日期即使所有事项都已完成也保留
            const datesWithTodos = Object.keys(todoData).filter(date => {
                const todos = todoData[date];
                return todos && (date === todayStr || todos.some(todo => !todo.completed));
            });
            
            if (datesWithTodos.length === 0) {
                container.innerHTML = '<div class="no-upcoming">暂无待办事项</div>';
                return;
            }
            
            // 转换为日期对象并排序
            const sortedDates = datesWithTodos.map(dateStr => {
                const [year, month, day] = dateStr.split('-').map(Number);
                return new Date(year, month, day);
            }).sort((a, b) => a - b);
            
            // 找出今天、最近的过去日期和最近的未来日期
            const todayDate = new Date(today.getFullYear(), today.getMonth(), today.getDate());
            
            // 过滤出今天及前后最近的日期
            const targetDates = new Set();
            
            // 添加今天（如果有记录）
            if (datesWithTodos.includes(todayStr)) {
                targetDates.add(todayStr);
            }
            
            // 找到最近的过去日期（今天之前）
            const pastDates = sortedDates.filter(date => date < todayDate);
            if (pastDates.length > 0) {
                const latestPastDate = pastDates[pastDates.length - 1];
                const latestPastDateStr = `${latestPastDate.getFullYear()}-${latestPastDate.getMonth()}-${latestPastDate.getDate()}`;
                targetDates.add(latestPastDateStr);
            }
            
            // 找到最近的未来日期（今天之后）
            const futureDates = sortedDates.filter(date => date > todayDate);
            if (futureDates.length > 0) {
                const earliestFutureDate = futureDates[0];
                const earliestFutureDateStr = `${earliestFutureDate.getFullYear()}-${earliestFutureDate.getMonth()}-${earliestFutureDate.getDate()}`;
                targetDates.add(earliestFutureDateStr);
            }
            
            // 转换为数组并按日期排序
            const displayDates = Array.from(targetDates).sort((a, b) => {
                const dateA = new Date(a.split('-').map(Number)[0], a.split('-').map(Number)[1], a.split('-').map(Number)[2]);
                const dateB = new Date(b.split('-').map(Number)[0], b.split('-').map(Number)[1], b.split('-').map(Number)[2]);
                return dateA - dateB;
            });
            
            // 生成HTML
            displayDates.forEach(dateStr => {
                const [year, month, day] = dateStr.split('-').map(Number);
                const dateObj = new Date(year, month, day);
                
                // 格式化日期显示
                let dateDisplay;
                if (dateStr === todayStr) {
                    dateDisplay = '今天';
                } else if (dateObj < todayDate) {
                    const diffDays = Math.floor((todayDate - dateObj) / (1000 * 60 * 60 * 24));
                    dateDisplay = `${diffDays}天前`;
                } else {
                    const diffDays = Math.floor((dateObj - todayDate) / (1000 * 60 * 60 * 24));
                    dateDisplay = `还有${diffDays}天`;
                }
                
                // 创建日期标题
                const dateSection = document.createElement('div');
                dateSection.className = 'upcoming-section';
                
                const dateHeader = document.createElement('div');
                dateHeader.className = `upcoming-date ${dateStr === todayStr ? 'today' : ''}`;
                dateHeader.textContent = `${dateDisplay} (${year}年${month + 1}月${day}日)`;
                dateSection.appendChild(dateHeader);
                
                // 创建待办列表
                const todoList = document.createElement('div');
                todoList.className = 'upcoming-list';
                
                // 今天的所有事项都显示，其他日期只显示未完成的
                const todos = dateStr === todayStr 
                    ? todoData[dateStr] 
                    : todoData[dateStr].filter(todo => !todo.completed);
                
                todos.forEach(todo => {
                    const todoItem = document.createElement('div');
                    todoItem.className = 'upcoming-item';
                    todoItem.innerHTML = `
                        <input type="checkbox" class="upcoming-checkbox" ${todo.completed ? 'checked' : ''} 
                               data-date="${dateStr}" data-id="${todo.id}">
                        <span class="upcoming-text ${todo.completed ? 'completed' : ''}">${todo.text}</span>
                    `;
                    todoList.appendChild(todoItem);
                });
                
                dateSection.appendChild(todoList);
                container.appendChild(dateSection);
            });
            
            // 绑定复选框事件
            document.querySelectorAll('.upcoming-checkbox').forEach(checkbox => {
                checkbox.addEventListener('change', function() {
                    const dateStr = this.dataset.date;
                    const todoId = parseInt(this.dataset.id);
                    const todo = todoData[dateStr].find(t => t.id === todoId);
                    
                    if (todo) {
                        todo.completed = !todo.completed;
                        localStorage.setItem('calendarTodos', JSON.stringify(todoData));
                        renderUpcomingTodos();
                        renderCalendar();
                    }
                });
            });
        }
        
        // 弹窗中渲染待办事项
        function renderTodosInModal() {
            const todoList = document.getElementById('todo-list');
            todoList.innerHTML = '';
    
            if (!selectedDate) return;
    
            const todos = todoData[selectedDate] || [];
            todos.forEach(todo => {
                const li = document.createElement('li');
                li.className = 'todo-item';
                li.innerHTML = `
                    <input type="checkbox" class="todo-checkbox" ${todo.completed ? 'checked' : ''} data-id="${todo.id}">
                    <span class="todo-text ${todo.completed ? 'completed' : ''}">${todo.text}</span>
                    <button class="delete-todo" data-id="${todo.id}">×</button>
                `;
                todoList.appendChild(li);
            });
    
            // 绑定事件
            document.querySelectorAll('.todo-checkbox').forEach(checkbox => {
                checkbox.addEventListener('change', toggleTodoStatus);
            });
            document.querySelectorAll('.delete-todo').forEach(btn => {
                btn.addEventListener('click', deleteTodo);
            });
        }
        
        // 添加待办事项（弹窗中）
        document.getElementById('add-todo').addEventListener('click', () => {
            if (!selectedDate) {
                alert('请先选择日期');
                return;
            }
    
            const input = document.getElementById('todo-input');
            const text = input.value.trim();
            if (!text) return;
    
            if (!todoData[selectedDate]) {
                todoData[selectedDate] = [];
            }
    
            todoData[selectedDate].push({
                id: Date.now(),
                text: text,
                completed: false
            });
    
            localStorage.setItem('calendarTodos', JSON.stringify(todoData));
            renderTodosInModal();
            renderCalendar();
            input.value = '';
        });
        
        // 切换待办状态
        function toggleTodoStatus(e) {
            const todoId = parseInt(e.target.dataset.id);
            const todos = todoData[selectedDate];
            const todo = todos.find(item => item.id === todoId);
            if (todo) {
                todo.completed = !todo.completed;
                localStorage.setItem('calendarTodos', JSON.stringify(todoData));
                renderTodosInModal();
                renderCalendar();
            }
        }
        
        // 删除待办
        function deleteTodo(e) {
            const todoId = parseInt(e.target.dataset.id);
            todoData[selectedDate] = todoData[selectedDate].filter(item => item.id !== todoId);
            localStorage.setItem('calendarTodos', JSON.stringify(todoData));
            renderTodosInModal();
            renderCalendar();
        }
        
        // 关闭弹窗
        document.getElementById('close-modal').addEventListener('click', () => {
            document.getElementById('note-modal').style.display = 'none';
        });
        
        // 保存备注
        document.getElementById('save-note').addEventListener('click', () => {
            if (!selectedDate) {
                alert('请先选择日期');
                return;
            }
    
            const content = document.getElementById('note-input').value.trim();
            if (content) {
                noteData[selectedDate] = content;
            } else {
                delete noteData[selectedDate];
            }
    
            localStorage.setItem('calendarNotes', JSON.stringify(noteData));
            renderCalendar();
        });
        
        // 清空备注
        document.getElementById('clear-note').addEventListener('click', () => {
            if (selectedDate && noteData[selectedDate]) {
                delete noteData[selectedDate];
                document.getElementById('note-input').value = '';
                localStorage.setItem('calendarNotes', JSON.stringify(noteData));
                renderCalendar();
            }
        });
        
        // 删除全部数据（备注和待办）
        document.getElementById('delete-note').addEventListener('click', () => {
            if (selectedDate && (noteData[selectedDate] || todoData[selectedDate])) {
                if (confirm('确定要删除该日期的所有数据吗？')) {
                    delete noteData[selectedDate];
                    delete todoData[selectedDate];
                    localStorage.setItem('calendarNotes', JSON.stringify(noteData));
                    localStorage.setItem('calendarTodos', JSON.stringify(todoData));
                    document.getElementById('note-input').value = '';
                    renderTodosInModal();
                    renderCalendar();
                }
            }
        });
        
        // 弹窗标签切换（待办/备注）
        document.querySelectorAll('.modal-tab').forEach(tab => {
            tab.addEventListener('click', () => {
                document.querySelectorAll('.modal-tab').forEach(t => t.classList.remove('active'));
                tab.classList.add('active');
                
                const tabName = tab.dataset.tab;
                document.querySelectorAll('.tab-pane').forEach(content => content.classList.remove('active'));
                document.getElementById(`${tabName}-tab`).classList.add('active');
            });
        });
        
        // 月份导航
        document.getElementById('prev-month').addEventListener('click', () => {
            currentDisplayDate.setMonth(currentDisplayDate.getMonth() - 1);
            renderCalendar();
        });
        document.getElementById('next-month').addEventListener('click', () => {
            currentDisplayDate.setMonth(currentDisplayDate.getMonth() + 1);
            renderCalendar();
        });
        
        // 点击弹窗外部关闭
        window.addEventListener('click', (e) => {
            const modal = document.getElementById('note-modal');
            if (e.target === modal) {
                modal.style.display = 'none';
            }
        });
        
        // 待办事项页面初始化
        function initTodosPage() {
            // 初始化日期选择器为今天
            const today = new Date();
            const formattedDate = today.toISOString().split('T')[0];
            document.getElementById('new-todo-date').value = formattedDate;
            
            // 渲染待办事项
            renderTodosPage();
        }
        
        // 渲染待办事项页面
        function renderTodosPage() {
            const allTodos = getAllTodos();
            const completedTodos = allTodos.filter(todo => todo.completed);
            const pendingTodos = allTodos.filter(todo => !todo.completed);
            
            // 更新统计数字
            document.getElementById('total-todos').textContent = allTodos.length;
            document.getElementById('pending-todos-count').textContent = pendingTodos.length;
            document.getElementById('completed-todos-count').textContent = completedTodos.length;
            
            // 渲染已完成事项
            const completedList = document.getElementById('completed-todos-list');
            if (completedTodos.length === 0) {
                completedList.innerHTML = '<div class="empty-state">暂无已完成事项</div>';
            } else {
                completedList.innerHTML = '';
                completedTodos.forEach(todo => {
                    const li = document.createElement('li');
                    li.className = 'todo-item';
                    li.innerHTML = `
                        <input type="checkbox" class="todo-checkbox" checked data-id="${todo.id}" data-date="${todo.date}">
                        <div class="todo-content">
                            <div class="todo-text completed">${todo.text}</div>
                            <div class="todo-date">${todo.formattedDate}</div>
                        </div>
                        <button class="delete-todo" data-id="${todo.id}" data-date="${todo.date}">×</button>
                    `;
                    completedList.appendChild(li);
                });
            }
            
            // 渲染未完成事项
            const pendingList = document.getElementById('pending-todos-list');
            if (pendingTodos.length === 0) {
                pendingList.innerHTML = '<div class="empty-state">暂无未完成事项</div>';
            } else {
                pendingList.innerHTML = '';
                pendingTodos.forEach(todo => {
                    const li = document.createElement('li');
                    li.className = 'todo-item';
                    li.innerHTML = `
                        <input type="checkbox" class="todo-checkbox" data-id="${todo.id}" data-date="${todo.date}">
                        <div class="todo-content">
                            <div class="todo-text">${todo.text}</div>
                            <div class="todo-date">${todo.formattedDate}</div>
                        </div>
                        <button class="delete-todo" data-id="${todo.id}" data-date="${todo.date}">×</button>
                    `;
                    pendingList.appendChild(li);
                });
            }
            
            // 绑定事件
            bindTodoPageEvents();
        }
        
        // 获取所有待办事项
        function getAllTodos() {
            let allTodos = [];
            Object.keys(todoData).forEach(dateStr => {
                // 转换日期格式为易读形式
                const [year, month, day] = dateStr.split('-').map(Number);
                const formattedDate = `${year}年${month + 1}月${day}日`;
                
                todoData[dateStr].forEach(todo => {
                    allTodos.push({
                        ...todo,
                        date: dateStr,
                        formattedDate: formattedDate
                    });
                });
            });
            // 按日期排序，最近的在前面
            return allTodos.sort((a, b) => new Date(a.date) - new Date(b.date));
        }
        
        // 绑定待办事项页面事件
        function bindTodoPageEvents() {
            // 复选框事件（更改完成状态）
            document.querySelectorAll('.todo-checkbox').forEach(checkbox => {
                checkbox.addEventListener('change', function() {
                    const todoId = parseInt(this.dataset.id);
                    const dateStr = this.dataset.date;
                    
                    if (todoData[dateStr]) {
                        const todo = todoData[dateStr].find(t => t.id === todoId);
                        if (todo) {
                            todo.completed = !todo.completed;
                            localStorage.setItem('calendarTodos', JSON.stringify(todoData));
                            renderTodosPage();
                            renderUpcomingTodos(); // 同步更新仪表盘的即将到期事项
                        }
                    }
                });
            });
            
            // 删除按钮事件
            document.querySelectorAll('.delete-todo').forEach(btn => {
                // 排除"清空全部"按钮
                if (!btn.id) {
                    btn.addEventListener('click', function() {
                        const todoId = parseInt(this.dataset.id);
                        const dateStr = this.dataset.date;
                        
                        if (todoData[dateStr]) {
                            todoData[dateStr] = todoData[dateStr].filter(t => t.id !== todoId);
                            // 如果该日期下没有待办事项了，删除该日期键
                            if (todoData[dateStr].length === 0) {
                                delete todoData[dateStr];
                            }
                            localStorage.setItem('calendarTodos', JSON.stringify(todoData));
                            renderTodosPage();
                            renderUpcomingTodos(); // 同步更新仪表盘的即将到期事项
                        }
                    });
                }
            });
            
            // 清空已完成按钮事件
            document.getElementById('clear-completed').addEventListener('click', function() {
                if (confirm('确定要清空所有已完成事项吗？')) {
                    Object.keys(todoData).forEach(dateStr => {
                        todoData[dateStr] = todoData[dateStr].filter(todo => !todo.completed);
                        // 如果该日期下没有待办事项了，删除该日期键
                        if (todoData[dateStr].length === 0) {
                            delete todoData[dateStr];
                        }
                    });
                    localStorage.setItem('calendarTodos', JSON.stringify(todoData));
                    renderTodosPage();
                    renderUpcomingTodos(); // 同步更新仪表盘的即将到期事项
                }
            });
            
            // 添加新待办事项
            document.getElementById('add-new-todo').addEventListener('click', addNewTodo);
            // 按Enter键添加
            document.getElementById('new-todo-text').addEventListener('keypress', function(e) {
                if (e.key === 'Enter') {
                    addNewTodo();
                }
            });
        }
        
        // 添加新待办事项
        function addNewTodo() {
            const textInput = document.getElementById('new-todo-text');
            const dateInput = document.getElementById('new-todo-date');
            
            const text = textInput.value.trim();
            const date = dateInput.value;
            
            if (!text || !date) {
                alert('请输入待办事项内容和日期');
                return;
            }
            
            // 转换日期格式为年-月-日（月从0开始）
            const [year, month, day] = date.split('-').map(Number);
            const dateStr = `${year}-${month - 1}-${day}`;
            
            if (!todoData[dateStr]) {
                todoData[dateStr] = [];
            }
            
            todoData[dateStr].push({
                id: Date.now(),
                text: text,
                completed: false
            });
            
            localStorage.setItem('calendarTodos', JSON.stringify(todoData));
            textInput.value = ''; // 清空输入框
            renderTodosPage();
            renderUpcomingTodos(); // 同步更新仪表盘的即将到期事项
        }
    </script>
</body>
</html>